<template>
  <div class="ele-body table-search">
    <el-card shadow="never">
      <ele-pro-table
        ref="table"
        :where="query"
        method="get"
        row-key="UserID"
        :datasource="url"
        :columns="columns"
        :request="defaultTableRequest"
        :response="defaultTableResponse"
        :size="defaultTableSize">
        <template slot="toolbar">
          <el-form :inline="true" :model="query" :size="defaultFormSize" class="ele-form-search">
            <el-form-item>
              <el-select class="width120px" @change="reload" v-model="query.Status" placeholder="请选择状态">
                <el-option v-for="item in userStatus" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="reload">
                查询
              </el-button>
              <el-button
                v-if="power.create"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="addOrEdit(false)">添加
              </el-button>
            </el-form-item>
          </el-form>
        </template>
        <template slot="Role" slot-scope="{row}">
          <template v-if="Number(row.IsSuper) === 1"> ---</template>
          <template v-else>
            <el-tag v-for="(item, index) in roleIdsToName(row.RoleID)" :key="index">
              {{item}}
            </el-tag>
          </template>
        </template>
        <template slot="action" slot-scope="{row, $index}">
          <template v-if="power.groupAuth.action">
            <el-link
              v-if="power.update"
              @click="addOrEdit(row)"
              icon="el-icon-edit"
              type="primary"
              :underline="false">修改
            </el-link>
            <template v-if="Number(row.UserStatus) === 1">
              <el-link
                v-if="power.editPass"
                @click="addOrEdit(row, 2)"
                icon="el-icon-lock"
                type="primary"
                :underline="false">修改密码
              </el-link>
              <el-popconfirm
                v-if="power.delete"
                class="ele-action"
                title="确定要删除此管理员吗？"
                @confirm="onRemove(row,$index)">
                <el-link
                  slot="reference"
                  icon="el-icon-delete"
                  type="danger"
                  :underline="false">删除
                </el-link>
              </el-popconfirm>
            </template>
          </template>
          <template v-else> ---</template>
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 编辑弹窗 -->
    <save-user :data="current" :role="roleMap" :visible.sync="showEdit" @done="reload"/>
    <!-- 编辑密码 -->
    <user-edit-pwd :data="current" :visible.sync="showEditPass"/>
  </div>
</template>

<script>
  import SaveUser from "./save";
  import columns from '@/config/columns/user'
  import {downConstantList} from "@/utils/common";
  import UserEditPwd from "@/components/sysuser/edit-password";

  export default {
    name: "user-index",
    components: {
      SaveUser,
      UserEditPwd
    },
    data() {
      return {
        // 列表定义
        columns,
        // 用户状态
        userStatus: downConstantList('UserStatus', false),
        // 表格数据接口
        url: '/user',
        // 当前编辑数据
        current: {},
        // 是否显示编辑弹窗
        showEdit: false,
        // 是否显示编辑弹窗-密码
        showEditPass: false,
        // 搜索条件
        query: {
          page: 1,
        },
        // 提交状态
        loading: false,
        // 角色列表
        roleMap: {},
        // 权限
        power: {}
      }
    },
    created() {
      this.loadGroupList()
      let auth = {
        create: 'user:create',
        update: 'user:update',
        editPass: 'user:reset-password',
        delete: 'user:delete',
      }
      this.power = this.$roleListPermission(auth, {
        action: ['update', 'editPass', 'delete']
      })
    },
    methods: {
      /* 角色列表 */
      loadGroupList() {
        this.$http.get('/role/map', {params: {IsPage: 'no'}}).then(res => {
          if (res.data.code === 200) {
            res.data.result.forEach(item => {
              this.roleMap[item.RoleID] = {
                RoleID: item.RoleID,
                RoleName: item.RoleName
              }
            })
          }
        })
      },
      /* 角色id转换 */
      roleIdsToName(roleIdList) {
        return roleIdList.map(roleId => {
          // eslint-disable-next-line no-prototype-builtins
          if (this.roleMap.hasOwnProperty(roleId)) {
            return this.roleMap[roleId].RoleName
          }
        })
      },
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload();
      },
      /* 修改行 */
      addOrEdit(row, type = 1) {
        this.current = row ? Object.assign(row, {}) : {};
        if (type === 1) {
          this.showEdit = true
        } else if (type === 2) {
          this.showEditPass = true
        }
      },
      /* 删除行 */
      onRemove(row) {
        const loading = this.$loading({lock: true});
        this.$http.post('/user/delete', {UserID: row.UserID}).then(res => {
          loading.close();
          if (res.data.code === 200) {
            this.$message({type: 'success', message: res.data.msg});
            this.reload();
          }
        }).catch(() => {
          loading.close();
        });
      },
    }
  }
</script>
